<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath();%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html class="app">

<!-- 页面顶部 -->
<c:import url="/admin/commonHeader.html" />

<body class="">
	<section class="vbox">
		
		<!-- 页面顶部布局 -->
		<c:import url="/admin/headerPage.html" />
		<!--/页面顶部布局 -->
		
		<section>
			<section class="hbox stretch">
			
				<!-- 页面顶部布局 -->
				<c:import url="/admin/leftPage.html" />
				<!--/页面顶部布局 -->
	
				<section id="content">
					<section class="hbox stretch">
						<section>
							<section class="vbox">
								<section class="scrollable padder-lg w-f-md" id="bjax-target">
									<h2 class="font-thin m-b">Discover 
										<span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
											<span class="bar1 a1 bg-primary lter"></span>
											<span class="bar2 a2 bg-info lt"></span>
											<span class="bar3 a3 bg-success"></span>
											<span class="bar4 a4 bg-warning dk"></span>
											<span class="bar5 a5 bg-danger dker"></span>
										</span>
									</h2>
									
									<!-- 正文开始 -->
									<div class="row row-sm" >
										<div>
											<section class="panel panel-default">
												<header class="panel-heading">
													角色信息
												</header>
												<div class="table-responsive">
													
													<div id="toolbar" class="btn-group">
														<button id="btn_add" type="button" class="btn btn-default">
															<span class="fa fa-plus" aria-hidden="true"></span> 新增
														</button>
														<button id="btn_edit" type="button" class="btn btn-default">
															<span class="fa fa-pencil" aria-hidden="true"></span> 修改
														</button>
														<button id="btn_delete" type="button" class="btn btn-default">
															<span class="fa fa-times" aria-hidden="true"></span> 删除
														</button>
														<button id="btn_approve" type="button" class="btn btn-default">
															<span class="fa fa-puzzle-piece" aria-hidden="true"></span> 分配权限
														</button>
													</div>
													
													<table id="roleTable" class="table table-striped b-t b-light">
													</table>
												</div>
											</section>
										</div>
									</div>
									<!-- 正文结束 -->
									
									<div class="modal fade" id="modal-info">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-body wrapper-lg">
													<div class="row">
														<div class="col-sm-12">
															<h3 class="m-t-none m-b" id="modal-info-title">角色编辑</h3>
															<p>角色信息修改.</p>
															<form id="detailForm" role="form">
																<input type="hidden" id="id" name="roleId" value="">
																
																<div class="form-group">
																	<label for="roleName">角色名称</label>
																	<input type="text" class="form-control" id="roleName" name="roleName" placeholder="角色名称">
																</div>
																
																<div class="form-group">
																	<label for="roleCode">备注</label>
																	<input type="text" class="form-control" id="remark" name="remark" placeholder="备注">
																</div>
																
																<p class="fr">
																	<a href="#" class="btn btn-info" id="btn_save"><i class="fa fa-save (alias)"></i> 保存</a>
																	<a href="#" class="btn btn-default modal-close"><i class="fa icon-power"></i> 关闭</a>
																</p>
															</form>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- 查询账号模态框（Modal） -->
									
									<!-- 分配角色模态框（Modal） -->
									<div class="modal fade" id="modal-authority">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-body wrapper-lg">
													<div class="row">
														<div class="col-sm-12">
															<input type="hidden" id="roleId2" value="">
															<h3 class="m-t-none m-b">权限分配</h3>
															<p>权限分配</p>
															<div class="authorityList" style="margin: 20px;">
																动态插入
															</div>
															<p class="fr">
																<a href="#" class="btn btn-info" id=btn_save_authority><i class="fa fa-save (alias)"></i> 保存</a>
																<a href="#" class="btn btn-default modal-close"><i class="fa icon-power"></i> 关闭</a>
															</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</section>
								
								<!-- 底部布局 -->
								<c:import url="/admin/footerPage.html" />
								<!--/底部布局 -->
							</section>
						</section>

					<!-- 聊天部分布局 -->
					<%-- <c:import url="/admin/connectionPage.html" /> --%>
					<!--/聊天部分布局 -->
				
					</section>
					<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
				</section>
			</section>
		</section>
	</section>
	
	<!-- 页面底部布局 -->
	<c:import url="/admin/commonFooter.html" />
	<!--/页面底部布局 -->
	
	<script>
		$(function(){
			//1.初始化Table
			var table = new xx_table();
			//映射列
			var columns = [{
				checkbox: true
			}, {
				field: 'roleName',
				title: '角色名称'
			}, {
				field: 'roleCode',
				title: '角色编码'
			}, {
				field: 'remark',
				title: '备注'
			}, {
				field: 'createDate',
				title: '创建时间'
			}, {
				field: 'updateDate',
				title: '更新时间'
			}];
			table.Init("roleTable", "query.html", columns, false, "id", "角色名称或备注");
			//初始化表格工具栏
			var button = new xx_button();
			button.Init("roleTable");
		});
		
		//新增事件
		function xx_add(){
			$("#modal-info-title").text("角色新增");
			//打开模态框
			xx_modal_open("#modal-info");
		}
		
		//回显
		function xx_info(id){
			$("#id").val(id);
			//ajax请求
			xx_ajax("info.html","get" , {id:id}, "json", "#toolbar", function(response){
				//视图加载
				xx_view_load.auto("#detailForm", response.rolePojo);
			});
		}
		
		//修改
		function xx_edit(id){
			$("#modal-info-title").text("角色编辑");
			xx_info(id);
		}
		
		//保存
		function xx_save(tableName){
			//ajax请求
			xx_ajax("save.html", "post" ,$("#detailForm").serialize(), "json", "#toolbar", function(response){
				//刷新表格数据
				$("#"+tableName).bootstrapTable("refresh", null);
				xx_modal_close("#modal-info");
			});
		}
		
		$("#btn_approve").on("click", function(){
			//获取选中行
			var objArr = $("#roleTable").bootstrapTable("getSelections", null);
			if(objArr.length == 0){
				xx_alert("info", "请选择要修改的数据！");
			}else if(objArr.length == 1){
				xx_modal_open("#modal-authority");
				//获取数据ID
				var roleId = objArr[0].id;
				//向分配权限模态框隐藏域赋予角色ID
				$("#roleId2").val(roleId);
				//ajax请求
				xx_ajax("<%=path%>/authority/findAuthorityList.html", "get" ,{'roleId':roleId} , "json", "#toolbar", function(response){
					if(response.operateMsg == 200){
						var checkBox = "";
						$.each(response.authoritys, function(i,authority){
							var checked = ""
							if(authority.hasAuthority != 0){
								checked = 'checked="checked"';
							}
							checkBox+= '<label class="checkbox m-n i-checks"><input name="authority" type="checkbox" '+checked+' value="'+authority.id+'" /><i></i>'+ authority.authorityName +'</label>';
						}); 
						$(".authorityList").html(checkBox);
					}else{
						xx_alert("error", "请求错误！");
					}
				});
			}else{
				xx_alert("info", "只能选择一条数据！");
			}
		});
		
		//保存权限
		$("#btn_save_authority").on("click", function(){
			//获取该角色下所有权限，并填充数组
			var authoritys = "";
			$.each($("input:checkbox[name='authority']:checked"),function(i){
				if(i == 0){
					authoritys+= $(this).val();
				}else{
					authoritys+= ","+$(this).val();
				}
			});
			
			xx_ajax("grantAuthority.html", "get" ,{'authoritys':authoritys, 'roleId':$("#roleId2").val()} , "json", "#toolbar", function(response){
				if(response.operateMsg == 200){
					$("#modal-authority").modal("hide");
					xx_alert("info", "保存成功！");
				}else{
					xx_alert("error", "请求错误！");
				}
			});
			
		});
	</script>
</body>
</html>